//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('../../assets/fonts/iconfont.css');
require('../../assets/css/tabbar.less');
require('../../assets/css/navbar.less');
require('./sports_course.less');

//引入模块
const dom = require('../../utils/dom.js');
const axios = require('../../utils/axios.js');

document.addEventListener('DOMContentLoaded', function () {
    //渲染tabbar
    dom.tabbar('sports');

    //渲染navbar
    dom.navbar('course');

    //1. 获取课程列表，并渲染到页面上
    axios.get('/api/train/courseList').then(res => {
        let data = res.data.data;
        let newCourse = data.shift();

        //渲染最新课程
        dom.get('.newcourse img').src = axios.defaults.baseURL + newCourse.imgurl;
        dom.get('.newcourse h4').textContent = newCourse.name;
        dom.get('.newcourse p').textContent = newCourse.desc.slice(0, 18) + '...';
        dom.get('.newcourse a').href = 'sports_course_detail.html?id=' + newCourse.courseId;

        //渲染课程列表
        let html = '';
        data.forEach(v => {
            html += `
                <li>
                    <a href="sports_course_detail.html?id=${v.courseId}">
                        <img src="${axios.defaults.baseURL + v.imgurl}">
                        <h4>${v.name}</h4>
                        <p>${v.desc.slice(0, 18)}</p>
                    </a>
                </li>
            `;
        });

        dom.get('.course-list ul').innerHTML = html;
    })
});